<extend name="public/base" />
<block name="title">网站首页</block>
<block name="main">


<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">

                <div class="ibox-content">
                    <h3 class="m-t-lg">修改内容实时对比</h3>
                    <p>
                        原文修改为 <span class="bg-danger  divider" style="text-decoration:line-through;"> 红色 </span>&nbsp;&nbsp; ; 在修改区操作为 <span class="bg-success"> 绿色 </span>
                    </p>
                    <div class="row diff-wrapper2">
                        <div class="col-md-4">
                            <h4>原文区</h4>
                            <textarea class="form-control diff-textarea" id="original" rows="15" readonly>
Lorem Ipsum is simply printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text eveLorem Ipsum is simply printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text eve</textarea>
                        </div>
                        <div class="col-md-4">
                            <h4>对比结果</h4>
                            <div class="diff2"></div>
                        </div>
                        <div class="col-md-4">
                            <h4>修改区</h4>
                            <textarea class="form-control diff-textarea" id="changed" rows="15">
Lorem Ipsum is simply printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text eveLorem Ipsum is simply printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text eve</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</block>

<block name="js">
    <!-- Diff march patch -->
    <script src="{$Think.const.RESOURCE}js/plugins/diff_match_patch/javascript/diff_match_patch.js"></script>

    <!-- jQuery pretty text diff -->
    <script src="{$Think.const.RESOURCE}js/plugins/preetyTextDiff/jquery.pretty-text-diff.min.js"></script>

    <script>

        $(document).ready(function () {

            // Initial diff1
            $(".diff-wrapper").prettyTextDiff({
                diffContainer: ".diff1"
            });


            // Initial diff2
            $(".diff-wrapper2").prettyTextDiff({
                originalContent: $('#original').val(),
                changedContent: $('#changed').val(),
                diffContainer: ".diff2"
            });

            // Run diff on textarea change
            $(".diff-textarea").on('change keyup', function() {
                $(".diff-wrapper2").prettyTextDiff({
                    originalContent: $('#original').val(),
                    changedContent: $('#changed').val(),
                    diffContainer: ".diff2"
                });

            });

        });

    </script>
</block>